<template>
   <div id="pie" style="display: flex">

   </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "Pie",
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      const chartDom = document.getElementById('right-bottom');
      const myChart6 = echarts.init(chartDom);
      let option;
      $.get(this.$BaseUrl+"/asiangameCountInfo/getall",function(resw) {
        const datas=[]
        console.log(resw)
        resw.forEach((value,index)=>{
          datas.push({value:value['countPlayer'],name:value['year']})

        })
        console.log(datas)

        option= {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '1%',
            left: 'center',
            color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
          },

          series: [
            {
              name: '参赛人数',
              type: 'pie',
              radius: ['30%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                // borderColor: '#040f3c',
                // backgroundColor:'#040f3c',
                borderWidth: 0

              },
              label: {
                show: false,
                position: 'center'
              },
              title: {
                text: '各届亚运会举办国',
                subtext:'数据来源:百度百科'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data:datas
            }

          ]
        };

        option && myChart6.setOption(option);
      })
      window.addEventListener("resize",()=>{
        myChart6.resize();
      });
    }
  }
}
</script>

<style scoped>
#pie{
  position: absolute;
  width: 50%;
  height: 30%;
}
</style>
